{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>湘西之旅 - 用户注册</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入湘西风格字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap" rel="stylesheet">

    <!-- 配置Tailwind自定义颜色和字体 - 湘西主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1A4D2E',      // 湘西靛蓝 - 主色调
                        secondary: '#E63946',    // 朱砂红 - 强调色
                        accent: '#FFB703',       // 金色 - 点缀色
                        neutral: '#F1FAEE',      // 米色 - 背景色
                        dark: '#1D3557'          // 深色 - 文本
                    },
                    fontFamily: {
                        xiangxi: ['"Ma Shan Zheng"', 'cursive'],
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .form-input-focus {
                @apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
            }
            .btn-primary {
                @apply bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-primary/50;
            }
            .input-field {
                @apply w-full px-4 py-3 rounded-lg border border-gray-300 transition-all duration-300 form-input-focus;
            }
            .form-label {
                @apply block text-sm font-medium text-dark mb-1.5;
            }
            .xiangxi-pattern {
                background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%231a4d2e' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            }
            .animate-shake {
                animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
            }
            @keyframes shake {
                10%, 90% { transform: translateX(-1px); }
                20%, 80% { transform: translateX(2px); }
                30%, 50%, 70% { transform: translateX(-3px); }
                40%, 60% { transform: translateX(3px); }
            }
        }
    </style>
</head>
<body class="font-inter bg-neutral xiangxi-pattern min-h-screen flex items-center justify-center p-4">
    <!-- 装饰元素 -->
    <div class="fixed top-10 left-10 w-24 h-24 opacity-10 transform rotate-12">
        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
            <path fill="#E63946" d="M50 0 L100 50 L50 100 L0 50 Z" />
        </svg>
    </div>
    <div class="fixed bottom-10 right-10 w-32 h-32 opacity-10 transform -rotate-12">
        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
            <path fill="#1A4D2E" d="M50 0 L100 50 L50 100 L0 50 Z" />
        </svg>
    </div>

    <div class="w-full max-w-md relative z-10">
        <!-- 注册卡片 -->
        <div class="bg-white rounded-2xl shadow-xl overflow-hidden transform transition-all duration-500 hover:shadow-2xl border border-gray-100">
            <!-- 卡片头部 - 湘西风格装饰 -->
            <div class="bg-gradient-to-r from-primary to-green-800 p-6 text-center relative overflow-hidden">
                <div class="absolute inset-0 opacity-10">
                    <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                        <path d="M0,0 L100,0 L100,100 L0,100 Z" fill="url(#pattern)" />
                        <defs>
                            <pattern id="pattern" width="10" height="10" patternUnits="userSpaceOnUse">
                                <path d="M0,5 L10,5 M5,0 L5,10" stroke="white" stroke-width="0.5" />
                            </pattern>
                        </defs>
                    </svg>
                </div>
                <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-xiangxi text-white relative">湘西之旅</h1>
                <p class="text-green-100 mt-1 relative">注册账号，开启神秘之旅</p>

                <!-- 土家族西兰卡普风格装饰线 -->
                <div class="flex justify-center mt-4 gap-1">
                    <div class="w-2 h-2 bg-accent rounded-full"></div>
                    <div class="w-8 h-0.5 bg-accent"></div>
                    <div class="w-2 h-2 bg-accent rounded-full"></div>
                    <div class="w-8 h-0.5 bg-accent"></div>
                    <div class="w-2 h-2 bg-accent rounded-full"></div>
                </div>
            </div>

            <!-- 错误消息展示 -->
            {% if messages %}
            <div class="px-6 pt-4">
                {% for message in messages %}
                <div class="p-3 rounded-lg {% if message.tags == 'error' %}bg-red-50 text-secondary{% else %}bg-green-50 text-green-700{% endif %} mb-3">
                    <i class="fa fa-exclamation-circle mr-2"></i>{{ message }}
                </div>
                {% endfor %}
            </div>
            {% endif %}

            <!-- 表单部分 -->
            <div class="p-6">
                <form id="registerForm" method="post" action="{% url 'register' %}">
                    {% csrf_token %}

                    <!-- 用户名输入 -->
                    <div class="mb-5">
                        <label for="username" class="form-label">
                            <i class="fa fa-user mr-1.5 text-primary"></i>用户名
                        </label>
                        <input type="text" id="username" name="username"
                               class="input-field"
                               placeholder="请输入用户名"
                               required
                               value="{{ form.username.value|default:'' }}">
                        <p class="hidden text-secondary text-sm mt-1.5" id="usernameError">
                            <i class="fa fa-exclamation-circle mr-1"></i>用户名不能为空
                        </p>
                    </div>

                    <!-- 昵称输入 -->
                    <div class="mb-5">
                        <label for="nickname" class="form-label">
                            <i class="fa fa-user-circle-o mr-1.5 text-primary"></i>昵称
                        </label>
                        <input type="text" id="nickname" name="nickname"
                               class="input-field"
                               placeholder="请输入您的昵称"
                               required
                               value="{{ form.nickname.value|default:'' }}">
                        <p class="hidden text-secondary text-sm mt-1.5" id="nicknameError">
                            <i class="fa fa-exclamation-circle mr-1"></i>昵称不能为空
                        </p>
                    </div>

                    <!-- 密码输入 -->
                    <div class="mb-5">
                        <label for="password" class="form-label">
                            <i class="fa fa-lock mr-1.5 text-primary"></i>密码
                        </label>
                        <div class="relative">
                            <input type="password" id="password" name="password"
                                   class="input-field pr-10"
                                   placeholder="请设置密码（至少6位）"
                                   required>
                            <button type="button" class="toggle-password absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-primary"
                                    data-target="password">
                                <i class="fa fa-eye-slash"></i>
                            </button>
                        </div>
                        <p class="hidden text-secondary text-sm mt-1.5" id="passwordError">
                            <i class="fa fa-exclamation-circle mr-1"></i>密码长度不能少于6位
                        </p>
                    </div>

                    <!-- 确认密码输入 -->
                    <div class="mb-6">
                        <label for="confirm_password" class="form-label">
                            <i class="fa fa-lock mr-1.5 text-primary"></i>确认密码
                        </label>
                        <div class="relative">
                            <input type="password" id="confirm_password" name="confirm_password"
                                   class="input-field pr-10"
                                   placeholder="请再次输入密码"
                                   required>
                            <button type="button" class="toggle-password absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-primary"
                                    data-target="confirm_password">
                                <i class="fa fa-eye-slash"></i>
                            </button>
                        </div>
                        <p class="hidden text-secondary text-sm mt-1.5" id="confirmError">
                            <i class="fa fa-exclamation-circle mr-1"></i>两次输入的密码不一致
                        </p>
                    </div>

                    <!-- 注册按钮 -->
                    <button type="submit" class="btn-primary w-full flex items-center justify-center gap-2 font-medium">
                        <i class="fa fa-user-plus"></i>
                        <span>确认注册</span>
                    </button>

                    <!-- 已有账号 -->
                    <div class="mt-5 text-center text-dark">
                        已有账号？<a href="{% url 'user_login' %}" class="text-primary hover:text-primary/80 font-medium transition-colors duration-300">立即登录</a>
                    </div>
                </form>
            </div>

            <!-- 底部装饰条 -->
            <div class="h-1 bg-gradient-to-r from-primary via-accent to-secondary"></div>
        </div>
    </div>

    <script>
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            const registerForm = document.getElementById('registerForm');

            // 密码显示/隐藏切换
            document.querySelectorAll('.toggle-password').forEach(button => {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    const targetId = this.getAttribute('data-target');
                    const passwordInput = document.getElementById(targetId);
                    const icon = this.querySelector('i');

                    if (passwordInput.type === 'password') {
                        passwordInput.type = 'text';
                        icon.classList.remove('fa-eye-slash');
                        icon.classList.add('fa-eye');
                    } else {
                        passwordInput.type = 'password';
                        icon.classList.remove('fa-eye');
                        icon.classList.add('fa-eye-slash');
                    }
                });
            });

            // 表单验证
            registerForm.addEventListener('submit', function(e) {
                let isValid = true;

                // 验证用户名
                const username = document.getElementById('username').value.trim();
                const usernameError = document.getElementById('usernameError');
                if (!username) {
                    showError(usernameError, '用户名不能为空');
                    isValid = false;
                } else {
                    hideError(usernameError);
                }

                // 验证昵称
                const nickname = document.getElementById('nickname').value.trim();
                const nicknameError = document.getElementById('nicknameError');
                if (!nickname) {
                    showError(nicknameError, '昵称不能为空');
                    isValid = false;
                } else {
                    hideError(nicknameError);
                }

                // 验证密码
                const password = document.getElementById('password').value;
                const passwordError = document.getElementById('passwordError');
                if (!password) {
                    showError(passwordError, '密码不能为空');
                    isValid = false;
                } else if (password.length < 6) {
                    showError(passwordError, '密码长度不能少于6位');
                    isValid = false;
                } else {
                    hideError(passwordError);
                }

                // 验证确认密码
                const confirmPassword = document.getElementById('confirm_password').value;
                const confirmError = document.getElementById('confirmError');
                if (!confirmPassword) {
                    showError(confirmError, '请再次输入密码');
                    isValid = false;
                } else if (confirmPassword !== password) {
                    showError(confirmError, '两次输入的密码不一致');
                    isValid = false;
                } else {
                    hideError(confirmError);
                }

                // 如果验证失败，阻止表单提交
                if (!isValid) {
                    e.preventDefault();

                    // 给第一个错误的输入框添加焦点
                    const firstError = document.querySelector('.text-secondary:not(.hidden)');
                    if (firstError && firstError.previousElementSibling) {
                        firstError.previousElementSibling.focus();
                        // 添加抖动动画
                        firstError.previousElementSibling.classList.add('animate-shake');
                        setTimeout(() => {
                            firstError.previousElementSibling.classList.remove('animate-shake');
                        }, 500);
                    }
                }
            });

            // 显示错误信息
            function showError(element, message) {
                if (!element) return;
                element.innerHTML = `<i class="fa fa-exclamation-circle mr-1"></i>${message}`;
                element.classList.remove('hidden');
                // 找到对应的输入框
                const inputId = element.id.replace('Error', '');
                const inputField = document.getElementById(inputId);
                if (inputField) {
                    inputField.classList.add('border-secondary');
                    inputField.classList.remove('border-gray-300');
                }
            }

            // 隐藏错误信息
            function hideError(element) {
                if (!element) return;
                element.classList.add('hidden');
                const inputId = element.id.replace('Error', '');
                const inputField = document.getElementById(inputId);
                if (inputField) {
                    inputField.classList.remove('border-secondary');
                    inputField.classList.add('border-gray-300');
                }
            }

            // 输入框实时验证
            const inputFields = registerForm.querySelectorAll('input');
            inputFields.forEach(input => {
                input.addEventListener('input', function() {
                    const id = this.id;
                    const value = this.value.trim();
                    const errorElement = document.getElementById(`${id}Error`);

                    // 根据不同字段进行验证
                    switch(id) {
                        case 'username':
                            if (value) hideError(errorElement);
                            break;
                        case 'nickname':
                            if (value) hideError(errorElement);
                            break;
                        case 'password':
                            if (value.length >= 6) hideError(errorElement);
                            // 同时检查确认密码
                            const confirmPassword = document.getElementById('confirm_password').value;
                            const confirmError = document.getElementById('confirmError');
                            if (confirmPassword && confirmPassword === value) {
                                hideError(confirmError);
                            }
                            break;
                        case 'confirm_password':
                            const password = document.getElementById('password').value;
                            if (value === password) hideError(errorElement);
                            break;
                    }
                });
            });
        });
    </script>
</body>
</html>